<!--  -->
<template>
  <div class="calculatorlist">
    <van-nav-bar @click-left="onClickLeft" title="收益计算器" :left-arrow="true" />
    <div class="tip">【异常】因银行系统维护，货款，还款功能暂停使用</div>
    <van-cell-group>
      <van-field v-model="value1" placeholder="意向投资金额" input-align="right">
        <template v-slot:label>
          <span class="name">投资金额</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">元</span>
        </template>
      </van-field>
      <van-field v-model="value1" placeholder="意向投资金额" input-align="right">
        <template v-slot:label>
          <span class="name">投资期限</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">日</span>
        </template>
      </van-field>
      <van-field v-model="value1" placeholder="意向投资金额" input-align="right">
        <template v-slot:label>
          <span class="name">日转化率</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">%</span>
        </template>
      </van-field>
      <van-field v-model="value1" readonly is-link placeholder="每日返息，到期还本" input-align="right">
        <template v-slot:label>
          <span class="name">还款方式</span>
        </template>
      </van-field>
    </van-cell-group>
    <div class="foot">
      <van-button type="primary" class="reset">重置</van-button>
      <van-button type="primary" class="start" @click="start">开始计算</van-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "calculatorlist",
  },
  data() {
    //这里存放数据
    return {
      value1: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    start() {
      this.$router.push({
        path: "/result",
        // query: {
        // },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.calculatorlist {
  width: 100%;
  height: 100%;
  background: #fafafa;
  overflow-y: auto;
  .tip {
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ff3232;
    height: 35px;
    background: #ffeaea;
    line-height: 35px;
  }
  .name {
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #20253a;
  }
  .foot {
    padding: 20px 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .reset {
      width: 45%;
      margin-right: 10%;
      background: #ffffff;
      border: 1px solid #dfdfdf;
      border-radius: 5px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #24293d;
    }
    .start {
      width: 45%;
      background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
      border-radius: 5px;
      box-shadow: 0px 2px 4px 0px #ffd9d4;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      border: none;
    }
  }
}
</style>